<!--评论列表-->
<template>
    <div>
        <el-row style="background-color: #F3F3F3;line-height: 45px; height: 45px;color: #8c939d;font-size: 10px;border: 1px solid #EBEBEB">
            <el-col :span="12" style="font-family: large;font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户设置</el-col>
            <el-col :span="12"><div  style="text-align: right"><el-button  style="padding: 7px 15px;margin: 7px 12px 5px 0px"><i class="el-icon-refresh">刷新</i></el-button></div><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <div class="WaiKe">
            <div class="OperationLine"><div class="FuDong SystemInformationTitle">历史评论次数</div><div class="FuDong SystemInformationContent">历史评论人数</div><div class="FuDong SystemInformationTitle">今日评论人数</div><div class="FuDong SystemInformationContent">今日评论次数</div></div>
            <div class="OperationLine"><div class="FuDong SystemInformationTitle">{{NumberOfHistoricalComments}}</div><div class="FuDong SystemInformationContent">{{NumberOfHistoricalCommenters}}</div><div class="FuDong SystemInformationTitle">{{NumberOfCommentersToday}}</div><div class="FuDong SystemInformationContent">{{CommentsToday}}</div></div>
        </div>
        <el-row style="background-color: #F3F3F3;line-height: 45px; height: 45px;color: #8c939d;font-size: 10px;border: 1px solid #EBEBEB">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 全部评论
        </el-row>
        <el-row style="background-color: #F3F3F3;line-height: 45px; height: 45px;color: #8c939d;font-size: 10px;border: 1px solid #EBEBEB">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="审批人" style="margin-left: 20px;margin-right: 10px">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" style="margin-left: 20px;margin-right: 40px">
                    <el-input v-model="formInline.region" placeholder="活动区域"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <<div>
        <el-table :data="tableData" class="table_bsm">
            <el-table-column
                    v-for="(col, index) in cols"
                    :key="index"
                    :prop="col.prop"
                    :label="col.label"
            >
                <template slot-scope="scope">
                    <i-cell :prop="col.prop" :row="scope.row"></i-cell>
                </template>
            </el-table-column>
        </el-table>
    </div>
        <el-pagination class="el-pagination"
                layout="prev, pager, next,->"
                       :page-size="pageParams.pagesize"
                       :total="100"
                       :current-page.sync="curPage"
                       @current-change="hCurrentChange"
                       @size-change="hSizeChange"
        >
        </el-pagination>
    </div>
</template>

<script>
    import iCell from "./iCell";
    export default {
        name: "CommentList",
        components: {
            iCell,
        },
        data(){
            return{
                pageParams: {
                    // 页码  每页几条
                    pagesize: 5,
                },
                NumberOfHistoricalComments:999,
                NumberOfHistoricalCommenters:999,
                NumberOfCommentersToday:999,
                CommentsToday:999,
                curPage:2,
                formInline: {
                    user: '',
                    region: ''
                },
                formInline02: {
                    user: '',
                    region: ''
                },
                cols: [
                    { prop: "name", label: "姓名" },
                    { prop: "sex", label: "性别" },
                    { prop: "age", label: "年龄" },
                    { prop: "operate", label: "操作" },
                ],
                tableData: [
                    {
                        name: "阿熙",
                        sex: "男",
                        age: "18",
                        operate: [
                            { name: "新增", type: "primary", size: "mini", click: "add" },
                            { name: "编辑", type: "danger", size: "mini", click: "edit" },
                            { name: "删除", type: "primary", size: "mini", click: "delete" },
                        ],
                    },
                    {
                        name: "小美",
                        sex: "女",
                        age: "16",
                        operate: [
                            { name: "新增", type: "primary", size: "mini", click: "add" },
                            { name: "编辑", type: "danger", size: "mini", click: "edit" },
                            { name: "删除", type: "primary", size: "mini", click: "delete" },
                        ],
                    },
                    {
                        name: "囡囡",
                        sex: "女",
                        age: "20",
                        operate: [
                            { name: "新增", type: "primary", size: "mini", click: "add" },
                            { name: "编辑", type: "danger", size: "mini", click: "edit" },
                            { name: "删除", type: "primary", size: "mini", click: "delete" },
                        ],
                    },
                ]
            }
        },
         methods: {
            async hCurrentChange(){
                let res = await this.$http.get('ModifyName', {params: {page:this.curPage}});
            },
             async onSubmit() {
                this.formInline02.user=this.formInline.user;
                this.formInline02.region=this.formInline.region;
                let res = await this.$http.get('ModifyName', {params: {AccountNumber:this.formInline02.user,curriculum:this.formInline02.region}});
            },
            async  hSizeChange(){
                let res = await this.$http.get('')
            }
        }
    }
</script>

<style scoped>
    .WaiKe{
        margin: 20px auto;
        width: 941px;
        border-top: #E4E4E4 1px solid;
        border-left: #E4E4E4 1px solid;
    }
    div{
        box-sizing: border-box;
    }
    .FuDong{
        float: left;
    }
    .OperationLine{
        height: 40px;
        line-height: 40px;
        font-size: 10px;
        text-align: center;
    }
    .SystemInformationTitle{
        width: 235px;
        height: 40px;
        background-color: #F9FAFC;
        border-right: #E4E4E4 1px solid;
        border-bottom: #E4E4E4 1px solid;
    }
    .SystemInformationContent{
        width: 235px;
        height: 40px;
        border-right: #E4E4E4 1px solid;
        border-bottom: #E4E4E4 1px solid;
    }
    .el-pagination {
        text-align: right;
    }
    .table_bsm {
        width: 98%;
        margin: auto;
    }
</style>